import React, { useState } from "react";
import { Button, NavBar,Cell } from "react-vant";
import "./index.scss";
import { useLocation, useNavigate } from "react-router-dom";
function Index() {
  const date = localStorage.getItem("date");
  const location = useLocation();
  const v = location.state;
  const [data, setData] = useState([
    { name: "二等座", price: "￥135", state: "有票" },
    { name: "一等座", price: "￥228", state: "12张" },
    { name: "商务座", price: "￥435", state: "11张" },
  ]);
  const [value, setValue] = useState("");
  const navigate=useNavigate()

  //去往订单页面
  const goOrder=(v)=>{
   navigate('/order',{state:v})
  }
  return (
    <div>
      <NavBar title={<h3>{date} 明天出发</h3>}></NavBar>
      {/* 详情信息 */}
      <div className="list">
        <div className="list-item">
          <div className="list-header">
            <div className="left">
              <dl style={{ marginRight: "10px" }}>
                <dt>{v.dst}</dt>
                <dd>{v.dasn}</dd>
              </dl>

              <dl>
                <dt>
                  {v.dt}
                  <p>---------------------&gt;</p>
                </dt>
                <dd>
                  {v.amn}-{v.amt}
                </dd>
              </dl>
              <dl style={{ marginLeft: "10px" }}>
                <dt>{v.ast}</dt>
                <dd>{v.aasn}</dd>
              </dl>
            </div>
          </div>
          <div className="bottom">
            <span style={{ marginRight: "10px", color: "#ccc" }}>
              刷身份证进出站
            </span>
            <span style={{ marginRight: "10px", color: "#ccc" }}>
              12306积分兑换
            </span>
            <span style={{ marginRight: "10px", color: "#ccc" }}>
              {" "}
              购票须知
            </span>
          </div>
        </div>
      </div>

      {/* 座次选择功能 */}

      <Button.Group style={{ marginTop: "20px" }}>
        {data.map((v, i) => {
          return (
            <Button
              type={value === v ? "success" : "default"}
              key={i}
             
              onClick={() => setValue(v)}
            >
              <p style={{fontSize:'12px'}}> {v.name}</p>
              <p style={{fontSize:'12px'}}> {v.price}</p>
              <p style={{fontSize:'12px'}}>  {v.state}</p>

            
            </Button>
          );
        })}
      </Button.Group>


    
    {/* 预定 */}
    <div style={{marginTop:'20px'}}>
        <dl style={{display:'flex',justifyContent:'space-between',marginBottom:'10px'}}>
            <dt>
                <h3>优惠享票</h3>
                 <p style={{color:'#ccc'}}>同程出行有保障,火车票￥135+￥20/张</p>
            </dt>
            <dd style={{width:'50px',height:'50px',background:'green',
                borderRadius:'10px',color:'#fff',lineHeight:'50px',textAlign:'center'
            }}  onClick={()=>goOrder(v)}>
                预定
            </dd>
        </dl>

         <dl style={{display:'flex',justifyContent:'space-between',marginBottom:'10px'}}>
            <dt>
                <h3>便捷购票</h3>
                 <p style={{color:'#ccc'}}>无需手机号核验,火车票￥135+￥20/张</p>
            </dt>
            <dd style={{width:'50px',height:'50px',background:'green',
                borderRadius:'10px',color:'#fff',lineHeight:'50px',textAlign:'center'
            }} onClick={()=>goOrder(v)}>
                预定
            </dd>
        </dl>

         <dl style={{display:'flex',justifyContent:'space-between',marginBottom:'10px'}}>
            <dt>
                <h3>12306购票</h3>
                 <p style={{color:'#ccc'}}>12306支持5:00~次日1:00出票</p>
            </dt>
            <dd style={{width:'50px',height:'50px',background:'green',
                borderRadius:'10px',color:'#fff',lineHeight:'50px',textAlign:'center'
            }} onClick={()=>goOrder(v)}>
                预定
            </dd>
        </dl>
    </div>
    </div>
  );
}

export default Index;
